<template>
    <div class="app-container" >
      <el-form ref="form" :model="form" label-width="150px" style="width: 100%" inline="true" align="center" disabled="true">
  
          <el-form-item label="工程部位">
              <el-input v-model="form.name"  ></el-input>
            </el-form-item >
  
          <el-form-item label="混凝土方量">
              <el-input v-model="form.size" placeholder="单位立方米" style="width: 120px"></el-input>
            </el-form-item >
  
  
          <el-form-item label="水泥(含水率%)">
            <el-input v-model="form.shuini" placeholder="100范围内" style="width: 120px"></el-input>
          </el-form-item >
          
          <el-form-item label="大石(含水率%)" >
              <el-input v-model="form.dashi"  style="width: 120px"></el-input>
            </el-form-item>
            
            <el-form-item label="中石(含水率%)">
              <el-input v-model="form.zhongshi" style="width: 120px"></el-input>
            </el-form-item>
            
            <el-form-item label="小石(含水率%)">
              <el-input v-model="form.xiaoshi" style="width: 120px"></el-input>
            </el-form-item>
            
            <el-form-item label="砂(含水率%)">
              <el-input v-model="form.sha" style="width: 120px"></el-input>
            </el-form-item>
            
            <el-form-item label="外加剂(含水率%)">
              <el-input v-model="form.waijia" style="width: 120px"></el-input>
            </el-form-item>
  
           <el-form-item label="混凝土标号">
            <el-select v-model="form.region" placeholder="请选择"  >
              <!-- <el-option label="C15" value="15"></el-option> -->
              <el-option label="C20" value="20"></el-option>
              <el-option label="C25" value="25"></el-option>
              <el-option label="C30" value="30"></el-option>
              <el-option label="C35" value="35"></el-option>
              <el-option label="C40" value="40"></el-option>
              <!-- <el-option label="C45" value="45"></el-option>
              <el-option label="C50" value="50"></el-option>
              <el-option label="C55" value="55"></el-option>
              <el-option label="C60" value="60"></el-option> -->
            </el-select>
          </el-form-item>
  
  
          <br>
  
          <el-form-item label="水泥" >
              <el-input v-model="form.shuini1" style="width: 120px" disabled="true"></el-input>
            </el-form-item >
            
            <el-form-item label="大石" >
                <el-input v-model="form.dashi1"  style="width: 120px" disabled="true"></el-input>
              </el-form-item>
              
              <el-form-item label="中石">
                <el-input v-model="form.zhongshi1" style="width: 120px" disabled="true"></el-input>
              </el-form-item>
              
              <el-form-item label="小石">
                <el-input v-model="form.xiaoshi1" style="width: 120px" disabled="true"></el-input>
              </el-form-item>
              
              <el-form-item label="砂">
                <el-input v-model="form.sha1" style="width: 120px" disabled="true"></el-input>
              </el-form-item>
              
              <el-form-item label="外加剂" >
                <el-input v-model="form.waijia1" :disabled="true" ></el-input>
              </el-form-item>
  
              <!-- 材料占比 -->
              <br>
              <el-form-item label="水泥(%)" >
                  <el-input v-model="form.shuini2" style="width: 120px" disabled="true"></el-input>
                </el-form-item >
                
                <el-form-item label="大石(%)" >
                    <el-input v-model="form.dashi2"  style="width: 120px" disabled="true"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="中石(%)">
                    <el-input v-model="form.zhongshi2" style="width: 120px" disabled="true"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="小石(%)">
                    <el-input v-model="form.xiaoshi2" style="width: 120px" disabled="true"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="砂(%)">
                    <el-input v-model="form.sha2" style="width: 120px" disabled="true"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="外加剂(%)" >
                    <el-input v-model="form.waijia2" :disabled="true" ></el-input>
                  </el-form-item>
          
         
              <br>
            <!-- <el-button type="primary" @click="onSubmit" >立即创建</el-button>
            <el-button type="primary" @click="del">取消</el-button> -->
          </el-form-item>
          
        </el-form>
  
        <div class="chart-container">       
          <div id="chart" class="chart" style="height:1000px;width:100%" />
        </div>
  
        
      </div>

  </template>
  
  
  <script>
      import hn from '@/api/hunning'
      import * as echarts from 'echarts';
      import {L2Dwidget} from 'live2d-widget'
      export default {
        data() {
          return {
            form: {
              shuini:"",
              dashi:'',
              zhongshi:"",
              xiaoshi:"",
              sha:'',
              waijia:'',
              region:'',
              size:'',
  
              shuini1:"",
              dashi1:'',
              zhongshi1:"",
              xiaoshi1:"",
              sha1:'',
              waijia1:'',
  
              shuini2:"",
              dashi2:'',
              zhongshi2:"",
              xiaoshi2:"",
              sha2:'',
              waijia2:'',
  
            }
          }
        },
        created(){
            
            //获取路由课程id值
        if(this.$route.params && this.$route.params.id) {
          this.id = this.$route.params.id
          console.log(this.id)
          //调用接口方法根据课程id查询
          this.getPublishId()
          this.onSubmit()
          
        }
        
  
          setTimeout(function () {
              L2Dwidget.init({
                  model: {
                      jsonPath: 'https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/live2d-widget-model-koharu/assets/koharu.model.json',
                  }
                  });
              },1000);
            
          },
        methods: {

            getPublishId(){         
                hn.showId(this.id)
                .then(response =>{
                this.form=response.data.hunning                 
                console.log(this.form)
            })
        },
          onSubmit() {
              hn.showId(this.id)
                .then(response => {//查询成功
                  this.form=response.data.hunning 
                  console.log(this.form)
            //提示信息
            this.$message({
                type: 'success',
                message: '查询成功!'
            });
            this.setChart()
            //回到列表页面 路由跳转
          //   this.$router.push({path:'/app/shuju'})
              })             
            },


            // del(){
            //     this.form={
            //       region:""
            //     }
            // },
  
            
  
            setChart() {
              // 基于准备好的dom，初始化echarts实例
              this.chart = echarts.init(document.getElementById('chart'))
              // console.log(this.chart)
              
              console.log(this.form.shuini1)
              
              // 指定图表的配置项和数据
              var option = {
                  title : {
                      text: '材料比例',
                      subtext: '',
                      x:'center',
                  },
                  tooltip : {
                      trigger: 'item',
                      formatter: "{a} <br/>{b} : {c} ({d}%)"
                  },
                  legend: {
                      orient : 'vertical',
                      x : 'left',
                      data:['水泥','大石','中石','小石','砂','外加剂']
                  },
                  toolbox: {
                      show : true,
                      feature : {
                          mark : {show: true},
                          dataView : {show: true, readOnly: false},
                          magicType : {
                              show: true, 
                              type: ['pie', 'funnel'],
                              option: {
                                  funnel: {
                                      x: '25%',
                                      width: '50%',
                                      funnelAlign: 'left',
                                      max: 1548
                                  }
                              }
                          },
                          restore : {show: true},
                          saveAsImage : {show: true}
                      }
                  },
                  calculable : true,
                  series : [
                      {
                          name:'访问来源',
                          type:'pie',
                          radius : '55%',
                          center: ['50%', '60%'],
                          data:[
                              {value:this.form.shuini1, name:'水泥'},
                              {value:this.form.dashi1, name:'大石'},
                              {value:this.form.zhongshi1, name:'中石'},
                              {value:this.form.xiaoshi1, name:'小石'},
                              {value:this.form.sha1, name:'砂'},
                              {value:this.form.waijia1, name:'外加剂'}
                          ]
                      }
                  ]
              };
                
                      
  
              this.chart.setOption(option)
          }
  
  
          
            
          }
        }
  </script>    